  <template>
    <div class="async-component">
        <component :is="asyncComponent" v-bind="$attrs"/>
    </div>
  </template>
  
  <script setup>
  import * as Vue from 'vue'
  import { loadModule } from 'vue3-sfc-loader/dist/vue3-sfc-loader.esm.js'
  import { defineAsyncComponent } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { request } from '@/utils/request.js'
  const props = defineProps({
    url: String
  })
  const options = {
    moduleCache: {
        vue: Vue,
        request: request,
        Message: Message
      },
      async getFile (url) {
          const res = await fetch(url)
          if (!res.ok) {
              Message.error(`组件 ${url} 加载失败。 [提示：${res.statusText}]`)
              return false
          }
          return {
            getContentData: (asBinary) => asBinary ? res.arrayBuffer() : res.text(),
        }
      },
      addStyle(textContent) {
        const style = Object.assign(document.createElement("style"), { textContent });
        const ref = document.head.getElementsByTagName("style")[0] || null;
        document.head.insertBefore(style, ref);
      }
    }
    const asyncComponent = defineAsyncComponent(() => loadModule(props.url, options))
  </script>
  <style>
  .async-component {
    width: 100%;
  }
  </style>